<script setup lang="ts">
import { PageRegionType } from '../../../enums'
import useConfigStore from '../../../store/config'

const {
  getPageRegionColor,
  setPageRegionColor,
} = useConfigStore()

const regions = computed(() => {
  return [
    {
      type: PageRegionType.LOGO,
      label: 'logo区域：',
      backgroundColor: getPageRegionColor.LOGO.background,
      textColor: getPageRegionColor.LOGO.text,
    },
    {
      type: PageRegionType.HEADER,
      label: 'header区域：',
      backgroundColor: getPageRegionColor.HEADER.background,
      textColor: getPageRegionColor.HEADER.text,
    },
    {
      type: PageRegionType.TAB,
      label: 'tab区域：',
      backgroundColor: getPageRegionColor.TAB.background,
      textColor: getPageRegionColor.TAB.text,
    },
    {
      type: PageRegionType.ASIDE,
      label: 'aside区域：',
      backgroundColor: getPageRegionColor.ASIDE.background,
      textColor: getPageRegionColor.ASIDE.text,
    },
    // {
    //   type: PageRegionType.MAIN,
    //   label: 'main区域：',
    //   backgroundColor: getPageRegionColor.MAIN.background,
    //   textColor: getPageRegionColor.MAIN.text,
    // },
  ]
})
</script>

<template>
  <ElForm>
    <ElFormItem
      v-for="region in regions"
      :key="region.type"
      label-width="100px"
      :label="region.label"
    >
      <ul class="flex gap-32px items-center">
        <li>
          <div class="mr-4px min-w-max">
            背景色
          </div>
          <ElColorPicker
            v-model="region.backgroundColor"
            @change="(color: string) => setPageRegionColor(region.type, 'background', color)"
          />
        </li>
        <li>
          <div class="mr-4px min-w-max">
            字体色
          </div>
          <ElColorPicker
            v-model="region.textColor"
            @change="(color: string) => setPageRegionColor(region.type, 'text', color)"
          />
        </li>
      </ul>
    </ElFormItem>
  </ElForm>
</template>
